<template>
  <div class="copyright-box">
    <div class="heard-title">
      <titles title="版权声明" />
    </div>
    <div
      class="title-box copyright-text"
      :class="{
        'title-box1': store.styleInfo.colorType == 1,
        'title-box2': store.styleInfo.colorType == 2,
        'title-box3': store.styleInfo.colorType == 3,
      }"
      v-html="commonStore.copyrightInfo"
      :style="{
        fontSize: store.styleInfo.fontSize,

        color: '#333',
      }"
    ></div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { colorList5 } from '../../data';
import { ref, watch } from 'vue';
import { copyrightSave, copyrightInfo } from '@/api/templates/templates';
import heardTitle from './heardTitle.vue';
import { useProjectStore, commonDataStore } from '@/store';
import titles from '../components/title.vue';
import { storeToRefs } from 'pinia';

const store = useProjectStore();
const { childModel, tabvalue } = storeToRefs(store);
const commonStore = commonDataStore();
commonStore.GetCopyrightInfo();
const loading = ref(true);
const Description = ref('');
const init = async () => {
  try {
    let { data } = await copyrightInfo(localStorage.getItem('projectId'));
    console.log(data);
    if (data) {
      Description.value = data;
    }
    loading.value = false;
  } catch {
    loading.value = false;
  }
};
// init();
// watch(
//   () => tabvalue,
//   () => {
//     init();
//   },
//   { deep: true },
// );
</script>

<style lang="less" scoped>
// @import './index.less';
.copyright-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 1180px;
  min-height: 900px;
  padding-bottom: 80px;
}
.heard-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 50px;
}
.title-box {
  // font-size: 17px;

  font-size: 34px;
  line-height: 40px;
  color: #333333;
  line-height: 32px;
}
.copyright-text {
  :deep(p) {
    text-indent: 2em;
    background: transparent;
    font-size: 16px;
    line-height: 40px;
    margin-bottom: 24px;
    font-weight: 400;
    font-family: PingFangSC, PingFang SC;
  }
  :deep(span) {
    background: transparent;
    font-size: 16px;
    line-height: 40px;
    margin-bottom: 24px;
  }
  :deep(div) {
    background: transparent;
    font-size: 16px;
    line-height: 40px;
    margin-bottom: 24px;
  }
}
.title-box1 {
  color: #e9d5b0;
  :deep(div) {
    color: #e9d5b0;
    margin-bottom: 24px;
  }
  :deep(p) {
    color: #e9d5b0;
  }
  :deep(span) {
    color: #e9d5b0;
  }
}
.title-box2 {
  color: #cbb995;
  :deep(div) {
    color: #cbb995;
  }
  :deep(p) {
    color: #cbb995;
  }
  :deep(span) {
    color: #cbb995;
  }
}
.title-box3 {
  color: #e9d5b0;
  :deep(div) {
    color: #e9d5b0;
  }
  :deep(p) {
    color: #e9d5b0;
  }
  :deep(span) {
    color: #e9d5b0;
  }
}
.t-row {
  margin: 0;
}
.title {
  font-size: 40px;
  font-family: 'SourceHanSerifCN-Bold';
  color: #333333;
  line-height: 72px;
}
</style>
